<template>
  <view class="helang-tab-bar">
    <view v-if="fixedBottom" class="placeholder" />
    <view class="bar" :class="{ fixed: fixedBottom }">
      <view class="bulgy" :style="bulgyMove" />
      <view class="h-flex-x h-flex-5">
        <view v-for="(item, index) in tabList"
              :key="index"
              class="item h-flex-x h-flex-center"
              :class="{
                active: current === index,
                recover: prevIndex === index,
              }"
              @tap="change(index)"
        >
          <view>
            <view class="h-flex-x h-flex-center">
              <view class="icon">
                <uni-icons :type="item.icon" size="48rpx" color="#6b6b68" />
              </view>
            </view>
            <view class="h-flex-x h-flex-center">
              {{ item.text }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // 冒泡
  name: 'HelangTabBarBubble',
  components: {},
  props: {
    // 固定底部
    fixedBottom: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      prevIndex: -1,
      current: 1,
      tabList: [
        {
          icon: 'home-filled',
          text: '首页',
        },
        {
          icon: 'chat-filled',
          text: '消息',
        },
        {
          icon: 'cart-filled',
          text: '购物',
        },
        {
          icon: 'gift-filled',
          text: '福利',
        },
        {
          icon: 'person-filled',
          text: '我的',
        },
      ],
    }
  },
  computed: {
    bulgyMove() {
      const style = `left:${(this.current / this.tabList.length) * 100}%`
      return style
    },
  },
  methods: {
    change(index) {
      if (this.current === index) return
      this.prevIndex = this.current
      this.current = index
    },
  },
}
</script>

<style lang="scss" scoped>
@use './helang-flex.scss';
@use './tab-bar.scss';

.helang-tab-bar {
  .bar {
    background-color: #17191d;
  }

  // 凸起
  .bulgy {
    width: 20%;
    height: 60rpx;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: -38rpx;
    transition: left 0.2s ease 0s;
    z-index: 0;

    &:before {
      content: '';
      display: block;
      width: 300rpx;
      height: 600rpx;
      border-radius: 50%;
      background-color: #17191d;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -150rpx;
      z-index: 1;
    }
  }

  .item {
    height: 100rpx;
    position: relative;
    color: #6a6a6a;
    font-size: 22rpx;
    line-height: normal;

    &.active {
      animation: font 0.2s ease 0.1s 1 normal;
      animation-fill-mode: forwards;

      .icon {
        position: relative;
        animation: translate 0.2s ease 0.1s 1 normal;
        animation-fill-mode: forwards;

        /deep/ .uni-icons {
          color: #e8c439 !important;
        }

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          opacity: 0;
          border-radius: 50%;

          animation: scale 0.3s ease 0.2s 1 normal;
          animation-fill-mode: forwards;
        }
      }
    }

    &.recover {
      .icon {
        animation: recover 0.3s ease 0s 1 normal;
      }
    }
  }
}

// 恢复默认
@keyframes recover {
  from {
    transform: translateY(-20rpx) scale(1.1, 1.1);
  }
  to {
    transform: translateY(0) scale(1, 1);
  }
}
// 转换移动
@keyframes translate {
  from {
    transform: translateY(0) scale(1, 1);
  }
  to {
    transform: translateY(-20rpx) scale(1.1, 1.1);
  }
}
// 圆圈缩放
@keyframes scale {
  0% {
    transform: scale(1, 1);
    opacity: 0;
    background-color: #e8c439;
  }
  100% {
    transform: scale(1.5, 1.5);
    opacity: 0.13;
    background-color: #e8c439;
  }
}

// 淡入
@keyframes font {
  from {
    color: #6a6a6a;
  }
  to {
    color: #aa9638;
  }
}
</style>
